Implement comprehensive UI test suite with meaningful assertions and best practices - #921

The demo video served dual purposes: marketing and UI validation. This PR separates concerns by extracting test cases into an independent, deterministic test suite while preserving the demo video workflow.

Changes

Test Suite (src/spec/ui-tests.spec.ts)

• 31 independent test cases organized into 18 categories (connection, tree structure, navigation, visualization, clipboard, SparkplugB, settings, retained messages, reconnection, message history, QoS levels, special characters, bridge status, 3D printer, IoT devices, value types, multiple devices, search edge cases)
• Meaningful assertions verifying UI state with explicit waitFor and expect statements
• Data-driven tests following Given-When-Then pattern (e.g., "Given a JSON message sent to topic kitchen/coffee_maker...")
• Tree structure exploration tests validating nested topic hierarchies and JSON message display
• Comprehensive coverage including reconnection flows, QoS levels, special characters, bridge status monitoring, 3D printer integration, IoT devices, and search edge cases
• Mocha/Chai assertions with screenshot verification
• Shared MQTT mock and Electron instance for performance
• Each test independently verifiable, no execution order dependencies

Test Categories Covered

1. Connection Management - Connection/disconnection/reconnection flows
2. Topic Tree Structure - Nested hierarchies, JSON structure, root topics
3. Topic Navigation and Search - Tree display, search filters, specific paths
4. Message Visualization - JSON formatting, numeric plots, diffs, QoS display
5. Clipboard Operations - Topic and value copying
6. SparkplugB Support - Protocol decoding
7. Settings and Configuration - Menu display, advanced settings
8. Retained Messages - Retained flag indicators
9. Reconnection and Connection State - Disconnect/reconnect validation
10. Message History and Updates - History display, real-time updates
11. Different QoS Levels - QoS 0, 1, 2 handling
12. Special Topic Names - Spaces, special characters, MAC addresses
13. Bridge Status Topics - zigbee2mqtt, ble2mqtt monitoring
14. 3D Printer Integration - OctoPrint temperature data
15. Garden/IoT Device Topics - Pump, water level, lamps
16. Topic Value Types - String, number, percentage, units
17. Multiple Lamp Devices - Device instance distinction
18. Search Functionality Edge Cases - Multiple matches, no results

CI/CD Integration (.github/workflows/tests.yml)

Three parallel jobs:

• test - existing unit tests
• ui-tests - new test suite with screenshot artifacts (30-day retention)
• demo-video - existing demo generation

Commands

• yarn test:ui - run test suite
• yarn ui-test - generate demo video (unchanged)
• ./scripts/runUiTests.sh - test suite with automated MQTT broker setup

Documentation

• docs/UI-TEST-SUITE.md - test architecture, best practices, troubleshooting
• docs/TEST-CASE-MAPPING.md - demo scenario → test case mapping
• Updated Readme.md with test commands
• .github/copilot-instructions.md - documented 7 UI testing best practices including Given-When-Then pattern, proper waiting strategies, meaningful assertions, data-test attributes usage, and MQTT async handling

Example Test Structure

describe('Topic Tree Structure', () => {
  it('Given a JSON message sent to topic kitchen/coffee_maker, the tree should display nested topics', async function () {
    // Given: Mock MQTT broker publishes JSON to kitchen/coffee_maker
    // When: We wait for the topic to appear in the tree
    await sleep(2000)

    // Then: Topic hierarchy should be visible (kitchen -> coffee_maker)
    const kitchenTopic = await page.locator('span[data-test-topic="kitchen"]')
    await kitchenTopic.waitFor({ state: 'visible', timeout: 5000 })
    expect(await kitchenTopic.isVisible()).to.be.true

    // And: Clicking on kitchen should expand to show coffee_maker
    await kitchenTopic.click()
    const coffeeMakerTopic = await page.locator('span[data-test-topic="coffee_maker"]')
    await coffeeMakerTopic.waitFor({ state: 'visible', timeout: 5000 })
    expect(await coffeeMakerTopic.isVisible()).to.be.true

    await page.screenshot({ path: 'test-screenshot-tree-hierarchy.png' })
  })
})

Best Practices Applied

1. Given-When-Then Pattern - Clear test structure and readability
2. Wait for Elements - Use waitFor instead of fixed delays
3. Meaningful Assertions - Verify actual UI state with explicit expectations
4. Data-Driven Scenarios - Tests describe data flow from MQTT to UI
5. Data Test Attributes - Reliable selectors using data-test-* attributes
6. Multiple Verification - Both state assertions and visual screenshots
7. MQTT Async Handling - Account for message propagation time

Both test suite and demo video share scenario implementations in src/spec/scenarios/, ensuring consistency between tested and demonstrated functionality.

Coverage Highlights

The comprehensive test suite validates:

• Connection/disconnection/reconnection flows
• Topic tree hierarchy with nested topics
• Search and filtering capabilities including edge cases
• JSON message formatting and display
• Numeric plots and charts
• Message diffs and history
• QoS levels (0, 1, 2)
• Retained messages
• Special characters and MAC addresses
• Bridge status monitoring (zigbee2mqtt, ble2mqtt)
• 3D printer integration (OctoPrint)
• IoT device states (garden pump, water level, lamps)
• Multiple device instances (lamp-1 vs lamp-2)
• Real-time value updates
• Different value types (string, number, percentage, units)
• SparkplugB decoding
• Clipboard operations
• Settings and configuration

• Fixes Implement tests #917

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.